<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :inline="true" :model="form">
                <el-button type="default" style="margin-right:10px;" @click="handleToday">今天</el-button>
                <el-form-item label="">
                    <div class="block w">
                        <el-date-picker
                            @change="handleChange"
                            class="w"
                            v-model="form.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                </el-form-item>

                <el-form-item label="">
                    <el-input
                        @keyup.native.enter="handleSearch"
                        clearable
                        @clear="handleSearch"
                        suffix-icon="el-icon-search"
                        v-model="query.resourceId"
                        placeholder="请输入资源ID"
                        style="margin-left:10px;"
                        class="handle-input mr10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input
                        @keyup.native.enter="handleSearch"
                        clearable
                        @clear="handleSearch"
                        suffix-icon="el-icon-search"
                        v-model="query.name"
                        placeholder="请输入专辑名称"
                        style="margin-left:10px;"
                        class="handle-input mr10"
                    ></el-input>
                </el-form-item>
                <el-button type="default">查询</el-button>
                <el-button type="primary" style="float:right;">导出</el-button>
            </el-form>
        </div>

        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column width="auto" label="排名" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column width="auto" label="资源ID" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column width="auto" label="试听人数" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column width="auto" label="付费人数" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total,sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 30]"
                @size-change="handleSizeChange"
                :current-page="query.pageIndex + 1"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import NProgress from 'nprogress';
export default {
    data() {
        return {
            query: {
                startTime: null,
                endTime: null,
                name: null,
                resourceId: null,
                pageIndex: 0,
                pageSize: 10
            },
            pageTotal: 0,
            tableData: [],
            form: {
                date: null
            }
        };
    },
    methods: {
        handleChange(date) {
            console.log(date);
            if (date != null) {
                this.query.startTime = this.$standardDateToLocal(date[0], 'yyyy-mm-dd', '-');
                this.query.startTime = this.$standardDateToLocal(date[1], 'yyyy-mm-dd', '-');
            } else {
                this.query.startTime = null;
                this.query.endTime = null;
            }
            // this.getData();
            this.handleSearch();
        },
        handleToday() {
            var today = new Date();
            this.query.startTime = this.$standardDateToLocal(today, 'yyyy-mm-dd', '-');
            this.query.endTime = this.$standardDateToLocal(today, 'yyyy-mm-dd', '-');
            this.handleSearch();
        },
        async getData() {
            try {
                NProgress.start();
                const url = '/rank/album/list';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        startTime: this.query.startTime,
                        endTime: this.query.endTime,
                        name: this.query.name,
                        resourceId: this.query.resourceId
                    }
                });
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tableData = [];
                    this.pageTotal = 0;
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val - 1);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    },
    created() {
        this.getData();
    },
    mounted() {},
    activated() {}
};
</script>
<style lang="scss" scoped>
.container {
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: auto;
    }

    .handle-input {
        width: 150px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
}
</style>
